<template>
  <!-- 地图容器：ref 用于在脚本中获取 DOM 元素 -->
  <div class="map-viewer" ref="viewerContainer"></div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import { useIndex } from "."; // 从当前目录导入组合式函数

// 定义组件接受的属性
const props = defineProps<{
  /**
   * 地图初始化配置选项
   * @example { terrainProvider: Cesium.createWorldTerrain() }
   */
  options?: any; // 更严格的类型可根据实际需求替换为具体类型
}>();

// 从 useIndex 解构需要的变量和方法
const { viewerContainer, initViewer, destroyViewer } = useIndex();

// 组件挂载时初始化地图
onMounted(() => {
  if (viewerContainer.value) {
    /**
     * 初始化地图查看器
     * @param container - DOM 容器元素
     * @param options - 地图配置选项
     */
    initViewer(viewerContainer.value, props.options);
  }
});

// 组件卸载时销毁地图
onUnmounted(() => {
  /**
   * 清理地图资源，避免内存泄漏
   */
  destroyViewer();
});
</script>

<style scoped>
/* 确保地图容器占满父级空间 */
.map-viewer {
  width: 100%;
  height: 100%;
}
</style>
